<!--
    @Title: index
    @Author  dudalei
    @Package
    @Date  2024/11/7 17:20
    @description:
-->
<script setup lang="ts">
import { markRaw, onBeforeUnmount, onMounted, provide, shallowRef, useTemplateRef } from 'vue'

import { ThreeScene } from '@/components/ThreeScene/common/ThreeScene'
import { useThreeSceneInjectKey } from '@/components/ThreeScene/common/useInjectKeys'

const threeContainerRef = useTemplateRef<HTMLCanvasElement>('threeContainer')

// three场景
const threeScene = shallowRef<ThreeScene>()
provide(useThreeSceneInjectKey, threeScene)

const init = () => {
  threeScene.value = markRaw(new ThreeScene(threeContainerRef.value!))
}
// 初始化
onMounted(init)
// 销毁
onBeforeUnmount(() => {
  threeScene.value?.destroy()
})
// 加载ifc https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_ifc.html
</script>

<template>
  <div class="three-container">
    <canvas ref="threeContainer"></canvas>
    <slot></slot>
  </div>
</template>

<style scoped>
.three-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000000;
}
.three-container > canvas {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
